<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../src/angular-pickadate.css">
    <style type="text/css">
      .container {
        width: 300px;
        margin: auto;
      }
      .selected-date {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body ng-app="testApp" id="ng-app" ng-controller="TestController">
    <div class="container">
      <div pickadate ng-model="date" min-date="minDate" max-date="maxDate" disabled-dates='disabledDates'></div>

      <div class="selected-date">
        Selected date is {{date || '(no date selected)'}}
      </div>
    </div>

    <script type="text/javascript" src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script type="text/javascript" src="../src/angular-pickadate.js"></script>
    <script type="text/javascript">
      angular.module('testApp', ['pickadate']);

      function TestController($scope, dateFilter) {
        $scope.date = '2013-11-26';
        $scope.minDate = '2013-10-05';
        $scope.maxDate = '2014-12-04';
        $scope.disabledDates = ['2013-11-19', '2013-11-30'];
      }
    </script>
  </body>
</html>
